<template>
  <view class="goods">
    <view class="item" v-for="item of list" :key="item.id" @click="goDetail(item.id)">
      <view class="img">
          <image :src="item.cover_pic" alt="" mode="aspectFill">
      </view>

      <view class="txt">
        <view class="title">
          {{item.name}}
        </view>
        <view class="price">
          ¥{{item.price}}

          <view class="buyText" v-if="showByText">购买</view>
        </view>

        <view
          class="icon"
          @click.stop="checked(item)"
          v-if="isSelect">
            <checkbox-group>
              <checkbox class="checkbox" :checked="getClass(item.id)" />
            </checkbox-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showByText:{
      type:Boolean,
      default:false
    },

    list: {
      type: Array,
      default() {
        return [];
      },
    },

    isSelect: {
      type: Boolean,
      default: false,
    },

    selectList: {
      type: Array,
      default() {
        return [];
      },
    },
    videoId: {
      type: [Number, String],
      default: undefined,
    }
  },

  computed: {
    getClass() {
      return (id) => {
        return this.selectList.findIndex((el) => el.id === id) !== -1
          ? true
          : false;
      };
    },
  },

  methods: {
    goDetail(id) {
      this.$utils.toUrl(`/goods/goods/goods?id=${id}&video_id=${this.videoId}`, "navigate");
    },

    checked(item) {
      this.$emit("checked", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods {
  .item {
    display: flex;
    padding: 24rpx 0;
    border-bottom: 1px solid #f8f8f8;

    &:last-of-type {
      border-bottom: 0;
    }
  }

  .txt {
    position: relative;
    flex: 1;
    overflow: hidden;
    height: 166rpx;

    .title {
      display: -webkit-box;
      white-space: normal;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      overflow: hidden;

      font-size: 30rpx;
      color: #262626;
      line-height: 34rpx;
      max-height: 68rpx;
    }

    .price {
      display: flex;
      align-items: center;  
      justify-content: space-between;
      padding-top: 20rpx;
      font-size: 32rpx;
      color: #f0250e;
    }
  }

  .img {
    margin-right: 20rpx;
    width: 166rpx;
    height: 166rpx;
    background: #f2f2f2;
    border-radius: 4px;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.buyText{
  padding: 10rpx 0;
  background: rgba(255,97,70,1);
  color:#fff;
  font-size: 24rpx;
  width: 120rpx;
  text-align: center;
  border-radius: 4px;
}
</style>
